<template>
	<view class="content">
			<view class="uni-panel-top">
				<image class="uni-image" src="/static/img/back.png" mode="widthFix" @click="clickBack"></image>
				<text class="uni-text-logo" @click="clickRandom">转乱序</text>
				<text class="uni-text-logo" @click="addNewWord">{{selectItem&&selectItem.isNewWord?'取消生词':'添加生词'}}</text>
				<view class="uni-panel-top-page">
					<image class="uni-image-page-left" src="../../static/img/arrow.png" mode="widthFix" @click="clickPrePage"></image>
					<text class="uni-text-logo">第 {{showPage+1}}/{{pageCount}} 页</text>
					<image class="uni-image-page" src="../../static/img/arrow.png" mode="widthFix" @click="clickNextPage"></image>
				</view>
				<text class="uni-text-logo" @click="clickListen">听力</text>
				<text class="uni-text-logo" @click="clickListenWrite">听写</text>
				<view class="uni-panel-top-box" @click="clickLianLianKan">
					<image class="uni-image-box" src="/static/img/gold.png" mode="widthFix" />
					<text class="uni-text-logo">连连看</text>
				</view>
				<text class="uni-text-logo" @click="clickStudyFinish">{{options.isTodayStudy=='false'?'复习完毕':''}}</text>
			</view>
			<view class="uni-panel-bottom">
				<view class="uni-panel-item">
					<text class="uni-text-item">英文</text>
					<text class="uni-text-item">音标</text>
					<text class="uni-text-item">中文</text>
				</view>
				<view class="uni-panel" @touchstart="touchStart" @touchend="touchEnd">
					<view class="uni-panel-book" v-for="(item, index) in listWord" :key="index" 
					@click="clickWordItem(item)"
					:style="{'background-color': item.isSelect ? '#ddd' : 'white'}">
						<text class="uni-text-word" 
						v-if="item.isShow" 
						:style="{'color': item.isNewWord ? 'red' : 'black'}">{{item.word}}</text>
						<text class="uni-text-word" v-if="item.isShowZh">{{item.phonetic}}</text>
						<text class="uni-text-word" v-if="item.isShowZh">{{item.word_zh}}</text>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import { addStudyLog, editNewWord, getWordInfo, getNewWordList, playMusic } from '@/api/api.js';
	import { HTTP_REQUEST_URL, VOICE_PATH, LIMIT } from '@/config/app.js';
	import store from "../../store";
	export default {
		mounted() {
		        // #ifdef APP-PLUS
		        plus.screen.lockOrientation('landscape');
		        // #endif
		    },
		data() {
			return {
				options: {},
				listWord: [],
				newWords: [],
				allWords: [],
				showPage: 0,
				pageCount: 0,
				selectItem: undefined,
				isPlayMusic: false,
				listenIndex: 0,
				startX: 0,
			}
		},
		onLoad(options) {
			this.options = options;
			// console.log( options)
		},
		onShow(){
			let params = {study_id: this.options.study_id, 
							user_id: this.options.user_id, 
							book_id: this.options.book_id};
			this.allWords = [];
			getNewWordList(params).then(res => {
				if(0 == res.code){
					console.log(res)
					let words = res.data.studyWords.split(',');
					for( let word of words){
						this.allWords.push(word); 
					}
					
					this.newWords = [];
					for( let item of res.data.rows){
						this.newWords = this.newWords.concat( item.words.split(','));
					}
					if(this.options.isNewWord=='true'){
						this.allWords = this.newWords;
					}
					this.pageCount = Math.floor(this.allWords.length/LIMIT);
					if(this.pageCount*LIMIT < this.allWords.length){
						this.pageCount++;
					}
					// this.showPage = 0;
					this.refreshShowWord();
				}
			})
		},
		methods: {
			refreshShowWord(){
				let showIndex = this.showPage * LIMIT;
				this.listWord = [];
				for( let i=0; i<LIMIT; i++){
					if( showIndex >= this.allWords.length){
						break;
					}
					let word = this.allWords[showIndex];
					let item = {word, isShowZh:false, isShow:true, isSelect:false, isNewWord:false};
					this.listWord.push(item)
					if( this.options.isNewWord=='true'){
						item.isNewWord = true;
					}else{
						item.isNewWord = this.newWords.find( i=>i==word) != undefined;
					}
					showIndex++;
				}
			},
			clickBack(){
				uni.navigateBack();
			},
			playWord(word){
				if(!this.isPlayMusic){
					let filename = HTTP_REQUEST_URL + VOICE_PATH + word + '.mp3'
					let that = this;
					playMusic( filename, playing=>{
						that.isPlayMusic = playing;
					})
				}
			},
			clickWordItem(item){
				this.playWord(item.word);
				if(this.selectItem && this.selectItem != item){
					this.selectItem.isShow = true;
					this.selectItem.isShowZh = false;
					this.selectItem.isSelect = false;
				}
				this.selectItem = item;
				if(item.isSelect){
					if(item.isShow){
						if( item.word_zh){
							if(item.isShowZh){
								item.isShow = false;
							}
							item.isShowZh = !item.isShowZh;
						}else{
							let that = this;
							let params = {word:item.word};
							getWordInfo(params).then(res => {
								console.log(res)
								if(res.data){
									item.word_zh = res.data.word_zh;
									item.phonetic = res.data.phonetic;
									item.isShowZh = true;
								}
							})
						}
					}else{
						item.isShow = true;
						item.isShowZh = false;
					}
				}else{
					item.isSelect = true
				}
			},
			clickStudyFinish(){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确认复习完毕吗？',
				    success: function (res) {
				        if (res.confirm) {
				            that.innerAddStudyLog();
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			innerAddStudyLog(){
				let params = {study_id:this.options.study_id};
				addStudyLog(params).then(res => {
					if(0 == res.code){
						uni.navigateBack();
					}else{
						uni.showToast({
						    title: res.msg,
							icon: 'none',
						    duration: 2000
						});
					}
				})
			},
			addNewWord(){
				if(this.selectItem){
					let params = {user_id:this.options.user_id, 
									book_id:this.options.book_id,
									word:this.selectItem.word,
									is_add:!this.selectItem.isNewWord};
					editNewWord(params).then(res => {
						//console.log(res)
						if(0 == res.code){
							this.selectItem.isNewWord = !this.selectItem.isNewWord;
							let index = this.newWords.indexOf(params.word)
							if(params.is_add){
								if( index < 0){
									this.newWords.push(params.word)
								}
							}else{
								if( index >= 0){
									this.newWords.splice(index, 1)
								}
							}
						}else{
							uni.showToast({
							    title: res.msg,
								icon: 'none',
							    duration: 2000
							});
						}
					})
				}
			},
			clickRandom(){
				this.listWord.sort(() => Math.random() - 0.5);
			},
			clickPrePage(){
				if(this.showPage <= 0){
					return;
				}
				this.showPage--;
				this.refreshShowWord();
			},
			clickNextPage(){			
				if(this.showPage+1 >= this.pageCount){
					return;
				}
				this.showPage++;
				this.refreshShowWord();
			},
			clickListen(){
				if(this.listenIndex >= this.listWord.length){
					this.listenIndex = 0;
				}
				let item = this.listWord[this.listenIndex];
				this.listenIndex++;
				this.clickWordItem(item)
				item.isShow = false;
			},
			clickListenWrite(){
				if(this.listenIndex >= this.listWord.length){
					this.listenIndex = 0;
				}
				let item = this.listWord[this.listenIndex];
				this.listenIndex++;
				item.isSelect = true;
				this.clickWordItem(item)
				item.isShow = false;
			},
			touchStart(event) {
				//console.log(event)
				this.startX = event.changedTouches[0].pageX;
			},
			touchEnd(event) {
				//console.log(event)
				let moveX = event.changedTouches[0].pageX;
				let distance = moveX - this.startX;
				// 可以在这里根据this.distance的值来执行滑动时的逻辑
				console.log(distance)
				if( distance < -150){
					this.clickNextPage();
				}else if( distance > 150){
					this.clickPrePage();
				}
			},
			clickLianLianKan(){
				if( this.allWords.length < LIMIT){
					uni.showToast({
					    title: '至少要5个单词才能进行连连看',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				let words = ''
				for( let i=0; i<this.allWords.length; i++){
					if( i >= (this.showPage+1)*LIMIT){
						continue;
					}
					let word = this.allWords[i];
					words += word + ',';
				}
				words = words.substring(0, words.length - 1);
				uni.navigateTo({
					url: '/pages/lianliankan/index?words=' + encodeURIComponent(words) + '&book_id=' + this.options.book_id
				});
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/bg.jpg');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}
	
	.uni-panel-top {
		width: 90%;
		height: 15%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.uni-panel-top-page {
		width: 20%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.uni-image-page-left {
		width: 15%;
		transform: rotate(180deg);
	}
	.uni-image-page{
		width: 15%;
	}
	
	.uni-image {
		width: 6%;
	}
	.uni-text-logo{
		color: white;
		font-size: 4vmin;
		text-align: center;
		font-weight: bold;
		text-shadow:
		    -1px -1px 0 #000,
		    1px -1px 0 #000,
		    -1px 1px 0 #000,
		    1px 1px 0 #000; /* 调整偏移量和颜色来设置描边宽度和颜色 */
	}
	.uni-image-box {
		width: 35%;
	}
	.uni-panel-top-box {
		width: 12%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.uni-panel-bottom {
		width: 90%;
		height: 70%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.uni-panel-item {
		background-color: whitesmoke;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-text-item{
		font-size: 4vmin;
		color: royalblue;
		letter-spacing: 2rpx;
		margin: 0 2%;
		font-weight: bold;
	}
	
	.uni-panel {
		width:100%;
		height: 90%;
		display: flex;
		flex-direction: column;
	}
	
	.uni-panel-book {
		height: 15%;
		width: 100%;
		margin-top: 1%;
		border-radius: 10rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.uni-panel-book-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.uni-word-image {
		width: 40rpx;
	}
	
	.uni-text-word{
		font-size: 5vmin;
		color: black;
		margin: 0 2%;
	}
	
</style>
